<template>
  <div class="page page-role">
    <c-content
      :page.sync="pages.page"
      :limit.sync="pages.limit"
      :totalRow.sync="pages.totalRow"
      @pagination="pageChange"
    >
      <!-- 查询 -->
      <el-form
        slot="search"
        :inline="true"
        class="search-form"
        label-width="100px"
        @submit.native.prevent
      >
        <el-form-item class="search-btn">
          <el-button v-waves @click="openXM" size="small">新增</el-button>
        </el-form-item>
        <!-- <el-form-item label="检测特征名称">
          <el-input
            v-model="form.name"
            placeholder="请输入检测特征名称"
            clearable
            @keyup.enter.native="getList()"
            @clear="getList()"
          />
        </el-form-item> -->
      </el-form>
      <!-- 展示 -->
      <el-table
        slot="table"
        ref="multipleTable"
        v-loading="tab_loading"
        width="100%"
        border
        :data="dataList"
        class="expand--table"
      >
        <!--        <el-table-column align="center" prop="id" label="ID" />-->
        <!-- <el-table-column align="center" prop="featureId" label="顺序的被测参数号" /> -->
        <!-- <el-table-column align="center" prop="partId" label="顺序的零件号" /> -->
        <!--        <el-table-column align="center" prop="type" label="警报类型">-->
        <!--          <template slot-scope="scope">-->
        <!--            {{types[scope.row.type]}}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column align="center" prop="jobNo" label="用户" />
        <el-table-column align="center" prop="stationNames" label="工位名" />
        <el-table-column
          align="center"
          prop="types"
          :formatter="typesFormatter"
          label="类型"
        ></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <c-button>
              <span @click="openXM(scope.row)">编辑</span>
              <!-- <span @click="handleDel(scope.row)" class="danger">删除</span> -->
            </c-button>
          </template>
        </el-table-column>
      </el-table>
    </c-content>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getJobNos } from '../../api/job'
import AddEdit from './XM/AddEditJob'
export default {
  components: {
    CContent: () => import('@/components/CContent'),
    CButton: () => import('@/components/CButton'),
  },
  computed: {
    ...mapGetters(['btn_permission']),
  },
  props: {
    layerid: {
      default: 0,
    },
  },
  data() {
    return {
      tab_loading: false,
      pages: this.$mpages,
      types: [
        { key: 1, val: '控制限' },
        { key: 2, val: '上下限' },
        { key: 3, val: '报废限' },
      ],
      form: {},
      dataList: [],
    }
  },
  created() {
    this.$getReset()
    this.getList()
  },
  methods: {
    typesFormatter(row) {
      let result = ''

      if (row.types) {
        let splits = []
        splits = row.types.split(',')

        this.types.forEach((item, index) => {
          splits.forEach((item_) => {
            if (item.key == item_) {
              if (index == this.types.length) {
                console.error('last')
                result += item.val
              } else {
                result += item.val + ','
              }
            }
          })
        })
      }
      return result.slice(0, result.length - 1)
    },
    /* 查询 */
    async getList() {
      const obj = JSON.parse(JSON.stringify(this.form))
      Object.assign(obj, this.pages)
      this.tab_loading = true
      const { data } = await getJobNos(obj)
      this.tab_loading = false
      this.dataList = data.data
      this.pages.totalRow = data.totalRow
    },
    /* 删除 */
    // handleDel(row) {
    //   this.$confirm('确认删除此信息?', '提示', {
    //     confirmButtonText: '确认',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(async () => {
    //     const res = await deleteFeatures(row.id)
    //    if (res.status == 200) {
    //       this.$message({ message: '删除成功', type: 'success' })
    //       this.getList()
    //    }
    //   }).catch(() => {
    //   })
    // },
    /* 添加和编辑 */
    openXM(row) {
      this.$layer.iframe({
        shadeClose: false,
        content: {
          content: AddEdit,
          parent: this,
          data: { row: row },
        },
        maxmin: true,
        area: ['600px', '500px'],
        title: row.id ? '修改消息配置' : '新增消息配置',
      })
    },
    /* 页码改变 */
    pageChange(param) {
      if (param.type === 'index') this.pages.page = param.val
      if (param.type === 'sizes') this.pages.pagesize = param.val
      this.getList()
    },
  },
}
</script>

<style lang="scss" scoped></style>
